<!-- 我的升级码 -->
<template>
  <div class="pag">
    <!-- 将已复制升级码标记为已售出  -->
    <cube-popup type="my-popup" v-show="showNotice" ref="upgradeMember" class="my-popup" maskClosable>
      <div class="active-ct">
        <div class="upgrade-member">
          <div class="dealer-info">
              <div class="info-bg">
                  <h2>{{dealerName}}</h2>
                  <p class="wechat"><strong>微信：{{wechat}}</strong><span class="clipboard-btn" :data-clipboard-text="wechat" @click="clipboardClick">复制</span></p>
                  <p><strong>邮箱：{{email}}</strong><span class="clipboard-btn" :data-clipboard-text="email" @click="clipboardClick">复制</span></p>
              </div>
          </div>
          <h3>为防止恶意骚扰每个用户<br/>每天只可查看3个经销商联系方式。</h3>
          <h4>具体购买价格以及交易方式<br/>可以加上微信后跟经销商具体协商。</h4>
          <div class="submit-btn">
            <span @click="closeDialog">知道了</span>
          </div>
        </div>
      </div>
    </cube-popup>
    <div class="content-placeholder">&nbsp;</div>
    <div class="member-service">
      <div @click="changeTitle(0)" :class="{'selected':current == 0}">新人榜</div>
      <div @click="changeTitle(1)" :class="{'selected':current == 1}">品质榜</div>
    </div>
    <div class="use-info">
      <div class="use-info-title" v-show="current == 0">
        <div class="use-btn-group">
          <span>用户名称</span>
          <span>入驻时间</span>
          <span>联系方式</span>
        </div>
      </div>
      <div class="use-info-title" v-show="current == 1">
        <div class="use-btn-group">
          <span>用户名称</span>
          <span>未使用会员码数量</span>
          <span>联系方式</span>
        </div>
      </div>
    </div>
    <div class="code-container">
      <div class="code-content" v-show="current == 0">
        <h2 v-show="newList.length == 0">暂无数据</h2>
        <div class="scroll-list-wrap" v-show="newList.length > 0">
          <cube-scroll ref="scroll1" :data="newList" :options="options">
            <div class="code-item" v-for="(item, index) in newList">
              <div class="detail">
                <h3>
                  <span class="code">{{item.name}}</span>
                  <span>{{item.createTime}}</span>
                  <button @click="getDealerInfo(item.uid, item.name)">查看TA的资料</button>
                  <!--<button class="clipboard-btn" :data-clipboard-text="item.code" @click="clipboardClick">复制口令</button>-->
                </h3>
              </div>
            </div>
          </cube-scroll>
        </div>
      </div>
      <div class="code-content" v-show="current == 1">
        <h2 v-show="qualityList.length == 0">暂无数据</h2>
        <div class="scroll-list-wrap" v-show="qualityList.length > 0">
          <cube-scroll ref="scroll2" :data="qualityList" :options="options">
            <div class="code-item" v-for="(item, index) in qualityList">
              <div class="detail">
                <h3>
                  <span class="code">{{item.name}}</span>
                  <span>{{item.codeNum}}</span>
                  <button @click="getDealerInfo(item.uid, item.name)">查看TA的资料</button>
                  <!--<button class="clipboard-btn" :data-clipboard-text="item.code" @click="clipboardClick">复制口令</button>-->
                </h3>
              </div>
            </div>
          </cube-scroll>
        </div>
      </div>
    </div>
    <!--<div @touchmove.prevent class="application-wrapper" v-show="current == 0">
      <div class="bottom-content" v-show="unsoldInfo == 0">
        <p @click="toggleSelectAll(unsold.oneMonthList)">
          <img src="~assets/images/dealer/yes.png" v-if="selectAll1" />
          <img src="~assets/images/dealer/no.png" v-else="" />全选
        </p>
        <div class="choose-info">
          <h3 v-show="unsoldInfo != 3">共{{unuse1}}个未使用升级码</h3>
          <h4 v-show="choose1 > 0">已选中{{choose1}}个升级码</h4>
        </div>
        <h5 v-if="choose1 > 0" class="selected clipboard-btn" @click="copyAllNotice" :data-clipboard-text="allCodes1">批量复制</h5>
        <h5 v-else>批量复制</h5>
      </div>
    </div>-->
  </div>
</template>

<script>

  import {dealerRank, dealerInfo} from 'api/register'


  export default {
    data () {
      return {
        uid: '',
        token: '',
        dealerName: '--',
        wechat: '--',
        email: '--',
        current: 0,
        unsoldInfo: 0,
        soldInfo: 0,
        newList: [],
        qualityList: [],
        available: 1,
        per: 100,
        page1: 1,
        page2: 1,
        source1: 0,   // 新人榜
        source2: 1,    // 品质榜
        options: {
          click: true,
          tap: true,
          pullUpLoad: false
        },
        showNotice: false,
        remainingTime: 3
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        /*vm.getUserCvn();
        vm.getUsedCodeInfo();
        vm.getUnusedCodeInfo();
        vm.getExpiredCodeInfo();*/
        let query = to.query;
        Object.assign(vm, query);
        vm.uid = query.uid;
        vm.token = query.token;
        // console.log(vm.uid, vm.token);
        vm.getNewDealerRank();
        vm.getQualityRank();
        // console.log(query);
      })
    },
    computed: {

    },
    created() {

    },
    mounted() {
      this.changeTitle(this.current);
    },
    methods: {
      getNewDealerRank() {
        dealerRank(this.page1, this.per, this.source1).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            if (data.data && data.data.length > 0) {
              this.newList = data.data;
            }
            if (!data.data || data.data == null) {
              this.newList = [];
            }
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      getQualityRank() {
        dealerRank(this.page2, this.per, this.source2).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            if (data.data && data.data.length > 0) {
              this.qualityList = data.data;
            }
            if (!data.data || data.data == null) {
              this.qualityList = [];
            }
          }
        }).catch((err) => {
           this.showToast(err.info, 'warn');
        })
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      getDealerInfo(uid, name) {
        /*if (this.remainingTime == 0) {
          this.showToast('每天最多可查看3个不同经销商联系方式', 'warn');
          return;
        }*/
        this.dealerName = name;
        dealerInfo(uid).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.remainingTime = data.data.remainingTime;
            if (data.data.wechat) {
              this.wechat = data.data.wechat;
            }
            if (data.data.email) {
              this.email = data.data.email;
            }
            setTimeout(() => {
              this.showNotice = true;
            }, 20)
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      closeDialog() {
        this.showNotice = false;
        this.wechat = '--';
        this.email = '--';
      },
      changeTitle(num) {
        this.current = num;
        if (this.current == 0) {
          this.$nextTick(() => {
            this.$refs.scroll1.refresh();
          })
        } else if (this.current == 1) {
          this.$nextTick(() => {
            this.$refs.scroll2.refresh();
          })
        }
      },

      hidePopup(){
        this.$router.back();
        this.$refs.popup.hide()
      },
      formatDateTime(time) {
        let date = new Date();
        date.setTime(time * 1000);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '/' + m + '/' + d;
      },
      closeActive () {
        this.$refs.popup.hide();
      },
      clipboardClick () {
        const toast = this.$createToast({
          txt: '复制成功！',
          type: 'correct'
        });
        toast.show();
      },
      copyAllNotice() {
        const toast = this.$createToast({
          txt: '所选升级码复制成功！',
          type: 'correct'
        });
        toast.show();
        this.showNotice = true;
      },

      confirmMark() {
        this.showNotice = false;
      },
      showToastNotice(txt) {
        const toast = this.$createToast({
          time: 1000,
          txt: txt
        });
        toast.show();
        setTimeout(() => {
          toast.hide();
        }, 2000);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'common/scss/index.scss';
  body,html{
    height:100%;
    background: #F5F5FB;
  }
  .pag {
    height: 100%;
    background: #F5F5FB;
    /*overflow-x:hidden;
    overflow-y:auto;*/
  }
  .content-placeholder{
    width:100%;
    height:24px;
    background: #F5F5FB;
  }
  .member-service{
    display:flex;
    height:72px;
    line-height:72px;
    margin:0 30px 0;
    border-radius:10px 10px 0 0;
    background: #E5E5E9;
    div{
      flex:1;
      width:50%;
      text-align:center;
      font-size:30px;
      color:#838899;
    }
    .selected{
      position:relative;
      border-radius:10px 10px 0 0;
      background:rgba(255,255,255,1);
      color:#202C5B;
      font-weight:600;
      /*&:after{
        content: "";
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: -2px;
        width: 20.933vw;
        height: 1vw;
        border-radius: 10.4vw;
        background-color: #4A90E2;
      }*/
    }
  }
  .code-container{
    /*margin-top: 1px;*/
    height:calc(100% - 184px);
    border-top:1px solid rgba(10,29,87,0.1);
  }
  .code-content{
    height:100%;
    h2{
      padding:12px 0;
      text-align:center;
      color: #838899;
      font-size:28px;
    }
  }
  .title{
    padding:12px 19px 12px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;/*垂直居中*/
    strong{
      font-size:18px;
      color:#666;
      font-weight:500;
    }
    span{
      font-size:24px;
      color:#F5A623;
    }
  }
  .info-area{
    padding:0 17px 17px;
    border-bottom:1px solid #979797;
    p{
      margin-top:10px;
      color:#585858;
      font-size:12px;
    }
  }
  .middle-gap{
    display:flex;
    .cube-input{
      background-color:#EEE;
    }
    .cube-input-field{
      color:#515151;
    }
    .cube-btn{
      background:#4A90E2;
    }
  }
  .exchange-info{
    padding:12px 17px 20px;
    h3{
      margin:4px 0 15px;
      font-size:16px;
      color:#999;
    }
    .exchange-wrapper{
      display:flex;
      color:#4A90E2;
      .exchange-content{
        /*flex:1;*/
        width:23.86%;
        text-align:center;
        border:1px solid #4A90E2;
        margin-right:1.5%;
        h2{
          margin:10px 0;
          font-size:20px;
          font-weight:500;
        }
        p{
          font-size:14px;
          margin-bottom:10px;
          white-space:nowrap;
        }
      }
      .exchange-content:last-child{
        margin-right:0;
      }
      .adjust-width{
        /*width:49.18%;*/
        width:32.18%;
      }
    }
  }
  .super-code{
    width:80%;
    margin:15px auto 0;
    border-radius:15px;
    height:30px;
    line-height:30px;
    text-align:center;
    color:#fff;
    font-size:16px;
    background:#4A9CFE;
    span{
      white-space:nowrap;
    }
  }
  .add-border-top{
    border-top:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
  }

  .add-border{border-radius:5px;}

  .enable-button{background:#4A9CFE;color:#fff;}

  .add-weight{
    font-weight:bold;
    color:#333;
    font-size:25px;
  }
  .use-notice{
    display:flex;
    align-items:center;
    padding:0 30px;
    height:66px;
    line-height:66px;
    .line{
      flex:0.7;
      height:1px;
      background:#EAEAEA;
    }
    .warm-text{
      flex:1;
      font-size:24px;
      text-align:center;
      color:#838899;
      span{
        color:#FF3636;
      }
    }
  }
  .use-info{
    height:88px;
    line-height:88px;
    font-size:0;
    background:#fff;
  }
  .use-info-title{
    /*margin:10px 0 15px;*/
    /*text-align:center;*/
    .use-btn-group{
      width:100%;
      /*box-shadow:0 1px 2px 0 rgba(10,29,87,0.3);*/
      /*margin:0 auto;*/
      /*border:1px solid #4A90E2;*/
      /*border-radius:7px;*/
    }
    span{
      display:inline-block;
      width:33.33333%;
      font-size:28px;
      /*text-align:center;*/
      color:#838899;
    }
    span:first-child{
      padding-left:30px;
      text-align:left;
    }
    span:nth-child(2) {
      text-align:center;
    }
    span:last-child{
      text-align:right;
      padding-right:38px;
    }
    .selected{
      position:relative;
      color:#202C5B;
      font-weight:600;
      &:after{
        content: "";
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: -2px;
        width: 24.99999vw;
        height: 0.68vw;
        border-radius: 10.4vw;
        background-color: #040440;
      }
    }
  }




  .scroll-list-wrap{
    /*height:calc(100% - 324px);*/
    height:100%;
    background:#fff;
  }

  .code-item{
    display:flex;
    height:104px;
    line-height:104px;
    padding-left:30px;
    align-items:center;
    .avatar{
      img{
        width:34px;
        height:34px;
        vertical-align: text-bottom;
      }
    }
    .detail{
      flex:1;
      h3{
        display:flex;
        padding-right:25px;
        border-bottom:1px solid #ECECEC;
        span{
          flex:1;
        }
        span:first-child{
          /*flex:0.85;*/
          font-weight:600;
          font-size:30px;
          color:#202C5B;
          text-align:left;
        }
        span:nth-child(2){
          /*flex:0.8;*/
          text-align:center;
          font-size:26px;
          color:#202C5B;
        }
        /*span:nth-child(3){
          flex:1.3;
          font-size:22px;
          color:#838899;
        }*/
        .unused{
          color:#00A989;
        }
        .used{
          color:#DC0630;
        }
        button{
          flex: 1;
          /*flex:0.7;*/
          /*height:54px;
          line-height:54px;
          margin-top:25px;*/
          font-size:26px;
          color:#1253FC;
          border:none;
          background:none;
          text-align:right;
        }
      }
    }

  }
  /*.code-item:nth-child(even){
    background:rgba(248,248,248,1);
  }
  .code-item:nth-child(odd){
    background:rgba(240,240,240,1);
  }*/




  .active-ct {
    .upgrade-member {

      margin: 0 auto 35px;
      width: 590px;
      height:94.3vw;
      /*height: 481px;*/
      /*height: 380px;*/
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      background:#fff;
      border-radius:14px;
      .dealer-info{
        width:100%;
        height:322px;
        background:#F2F2F5;
        padding:30px 38px;
        .info-bg{
          width: 514px;
          height:262px;
          padding:32px 23px;
          background: url("~assets/images/dealer/dialogbg.png") no-repeat center center;
          background-size: contain;
          h2{
            margin-bottom:47px;
            font-size:34px;
            font-weight:600;
            color:rgba(255,255,255,1);
          }
          p{
            display:flex;
            justify-content:space-between;
            align-items:center;
            font-size:28px;
            font-weight:600;
            color:rgba(255,255,255,1);
            strong{
              flex:1;
              max-width:350px;
              white-space:nowrap;
              overflow:hidden;
              text-overflow:ellipsis;
              font-size:28px;
              color:rgba(255,255,255,1);
              font-weight:600;
            }
            span{
              display:inline-block;
              width:108px;
              height:54px;
              line-height:54px;
              border:1px solid rgba(255,255,255,1);
              border-radius:27px;
              font-size:24px;
              text-align:center;
              cursor:pointer;
            }
          }
          .wechat{
            margin-bottom:24px;
          }
        }
      }
      h3{
        margin:30px auto 29px;
        text-align:center;
        font-size:28px;
        font-weight:600;
        line-height:1.5;
        color:#202C5B;
      }
      h4{
        margin:-10px auto 50px;
        text-align:center;
        font-size:28px;
        font-weight:400;
        line-height:1.5;
        color:#838899;
      }
      .submit-btn{
        height:84px;
        line-height:84px;
        width:87.11%;
        font-size:34px;
        margin:0 auto;
        border-radius:42px;
        background:#173E8F;
        text-align:center;
        span{
          display:inline-block;
          width:100%;
          color:#fff;
        }
        /*span:last-child{
          color:#1253FC;
          border-left:1px solid #D0D4E4;
          !*margin-right:10px;*!
        }*/
      }
    }
  }
  .application-wrapper{
    display:flex;
    height:98px;
    /*line-height:98px;*/
    align-items:center;
    .bottom-content{
      display:flex;
      align-items:center;
      width:100%;
      height:98px;
      /*line-height:98px;*/
      font-size:36px;
      text-align:center;
      color:#2E3045;
      background:rgba(255,255,255,1);
      box-shadow:0px -1px 8px 0px rgba(10,29,87,0.2);
      p{
        font-size:30px;
        color:#202C5B;
        cursor:pointer;
        img{
          width:34px;
          height:34px;
          margin:0 20px 0 30px;
          vertical-align: text-bottom;
        }
      }
      .choose-info{
        flex:1;
        text-align:right;
        h3{
          font-size:26px;
          color:#173E8F;
        }
        h4{
          margin-top:13px;
          font-size:24px;
          color:#838899;
        }
      }
      h5{
        width:176px;
        height:64px;
        margin:17px 30px;
        line-height:64px;
        background:#D0D0D0;
        border-radius:32px;
        font-size:28px;
        color:#FFF;
        cursor:pointer;
      }
      .selected{
        background:rgba(23,62,143,1);
      }
    }
  }
  .cube-popup_mask{
    background:rgba(0,0,0,0.5);
  }
  .cube-input-field:focus{
    outline:none;
  }
  .cube-input:after{
    border:none;
  }

</style>
